<template>
  <el-card>
    <el-button type="primary" icon="el-icon-circle-plus-outline"
       @click="$router.push('/goods/add')">新增</el-button
    >
    <el-divider />
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="firstcatename" label="一级分类" min-width="180">
      </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" min-width="180">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" min-width="180">
      </el-table-column>
      <el-table-column prop="img" label="商品图片" min-width="180">
        <template v-slot="$props">
          <img
            :src="$imgBaseURL + $props.row.img"
            alt=""
            style="height: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" min-width="180">
      </el-table-column>
      <el-table-column prop="price" label="零售价格" min-width="180">
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品" min-width="180">
        <template v-slot="$props">
          <el-switch
            v-model="$props.row.isnew"
            :active-value="1"
            :inactive-value="0"
            @change="statusUpdate($props.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" min-width="180">
        <template v-slot="$props">
          <el-switch
            v-model="$props.row.ishot"
            :active-value="1"
            :inactive-value="0"
            @change="statusUpdate($props.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="180">
        <template v-slot="$props">
          <el-tag v-if="$props.row.status === 1" type="primary">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" fixed="right">
        <template v-slot="$prop">
          <el-button
            type="success"
            circle
            icon="el-icon-edit"
            size="mini"
            @click="$router.push('/goods/'+$prop.row.id)"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            size="mini"
            @click="del($prop.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="pageChange" :page-size="size" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import { getGoodsList, getGoodsCount ,getGoodsUpdate} from "../../request/goods";
export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 5,
      total: 0,
    };
  },
  methods: {
    // 点击切换页码
    pageChange(page){
      // 更新
      this.page=page
      // 重新请求数据列表
      this.getGoodsList()
    },
    // 监听switch的状态
    statusUpdate(row){
      getGoodsUpdate({
        id:row.id,isnew:row.isnew,ishot:row.ishot}).then(res=>{
        if(res.code===200){
          this.$success('操作成功')
        }
          this.$error('操作失败')
      })
    },
    // 数据列表
    async getGoodsList() {
      const list = await getGoodsList(this.page, this.size);
      if (list) {
        // console.log(list);
        this.list = list;
      }
    },
    // 用于分页
    async getGoodsCount() {
      const total = await getGoodsCount();
      if (total) {
        this.total = total;
      }
    },
    del(id){
      this.$confirm(async ()=>{
        const res=await this.$http.post('/api/goodsdelete',{id});
        // console.log(res) res中有list，是一组列表
        // 即时的在视图层删除  其实远端数据库红已经删除了
        // 删除有两种方法，这是其中一种
        if(res.code===200){
          // 查找下标的id ，这里不太理解
          const index=this.list.findIndex(item=>item.id===id);
          this.list.splice(index,1)
          this.$success('删除成功')
        }
      })
    }
  },
  created() {
    this.getGoodsList();
    this.getGoodsCount();
  },
};
</script>

<style>
</style>